0
397
ViewsCambiar el color de fondo de div cuando se selecciona "radio"
Necesito cambiar el color de fondo del div principal de una entrada (tipo de radio) cuando se selecciona la entrada, pero, si el usuario selecciona otra entrada, el div original debe volver a su color original y cambiar el div de la entrada recién seleccionada. Hasta ahora, solo hice una función que cambia el color del div según la entrada seleccionada, por lo que si hago clic en otra entrada, ambos div cambiarán de color. Busqué una solución para esto, pero no pude encontrar ninguna. El código es este hasta ahora:
function changeBg(posicao) { var changer = document.getElementById(posicao); if (changer.checked = true) { changer.style.backgroundColor = "#FFCE00"; } } <div class="posicao" id="um"> <input class="input-posicao " onclick="changeBg('um')" name="posicao" value="um" type="radio"> </div> <div class="posicao" id="dois"> <input class="input-posicao " onclick="changeBg('dois')" name="posicao" value="dois" type="radio"> </div> <div class="posicao"> <input class="input-posicao" onclick="changeBg('tres')" name="posicao" value="tres" type="radio"> </div> <div class="posicao"> <input class="input-posicao" onclick="changeBg('quatro')" name="posicao" value="quatro" type="radio"> </div> <div class="posicao"> <input class="input-posicao" onclick="changeBg('cinco')" name="posicao" value="cinco" type="radio"> </div> <div class="posicao"> <input class="input-posicao" onclick="changeBg('seis')" name="posicao" value="seis" type="radio"> </div> <div class="posicao"> <input class="input-posicao" onclick="changeBg('sete')" name="posicao" value="sete" type="radio"> </div> <div class="posicao"> <input class="input-posicao" onclick="changeBg('oito')" name="posicao" value="oito" type="radio"> </div> <div class="posicao"> <input class="input-posicao" onclick="changeBg('nove')" name="posicao" value="nove" type="radio"> </div>En la impresión, puede ver lo que sucede si selecciono 2 entradas.
3 answers
Answer question0
No es necesario adjuntar un detector de eventos a cada botón de opción. Simplemente cree un contenedor alrededor de cada uno y escuche el evento de change allí (Delegación de eventos).
Y el estilo se puede hacer a través de css, por ejemplo, con una clase active . El active se puede eliminar del elemento previamente activo. Y luego agregado al actualmente activo.
document.querySelector('.radiogroup').addEventListener('change', (evt) => { // evt.currentTarget is the .radiogroup element // and we search for all elements with the active class evt.currentTarget .querySelectorAll('.active') .forEach(element => { // remove the active class from those elements element.classList.remove('active') }) // in this simple case evt.target is the radio button // that became active for more complex event delegation you // need to check what evt.target is. // search for the ascendant with the class posicao // and add the active class to it evt.target .closest('.posicao') .classList.add('active'); }, true); .posicao { display: inline-block; background: grey; } .active { background-color: yellow; } <div class="radiogroup"> <div class="posicao"> <input name="posicao" type="radio"> </div> <div class="posicao"> <input name="posicao" type="radio"> </div> <div class="posicao"> <input name="posicao" type="radio"> </div> <div class="posicao"> <input name="posicao" type="radio"> </div> <div class="posicao"> <input name="posicao" type="radio"> </div> </div>0
En primer lugar, no es una buena práctica llamar a funciones en línea en el archivo html, agregar un detector de eventos en su secuencia de comandos y manejar las entradas del usuario allí:
const radios = document.querySelectorAll('input[type="radio"]'); radios.forEach(radio => { radio.onclick = () => { radios.forEach(radio => { radio.style.backgroundColor = radio.checked ? '#FFCE00' : '#ffffff'; }); } });0
Aquí tienes una función js de Vanilla que funciona para tu problema.
Pero ha perdido la identificación desde el segundo div 'posicao' hasta el último, agregue la identificación correcta.
function changeBg(id) { let changer = document.getElementById(id); let all = document.getElementsByClassName('posicao'); console.log(all); for (let i =0; i<all.length; i++){ all[i].classList.remove('color') } changer.classList.add("color"); } </script>